<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <grandpa></grandpa>
    </div>

    <script>
        const app = Vue.createApp({})

        app.component('grandpa', {
            data() {
                return {
                    name: "朱重六",
                    age:80,
                    years:0,
                    timer:null
                }
            },
            provide() {
                return {
                    user: '隔壁欢哥',
                    grandpaName: this.name,
                    years:this.years,

                    // 给后代Provide响应式数据
                    grandpaAge: Vue.computed(() => this.age + this.years)
                }
            },

            // 组件挂载
            mounted(){
                this.timer = setInterval(() => {
                    this.years++
                }, 1000);
            },

            // 组件卸载 
            beforeUnmount(){
                clearInterval(this.timer)
            },
            
            template: `
                <div>
                    <h3>我是爷爷！</h3>
                    <father></father>
                </div>
            `
        })

        app.component('father', {
            template: `
                <div>
                    <h3>我是你爸爸</h3>
                    <son></son>
                </div>
            `
        })

        app.component('son', {
            inject: ['user', 'grandpaName','grandpaAge','years'],
            template: `
                <div>
                    <h3>劳资是儿子：{{user}}</h3>
                    <h3>我爷是：{{grandpaName}}</h3>
                    {{years}}年过去了...
                    <h3>他老人家今年芳龄：{{grandpaAge}}</h3>
                </div>
            `
        })

        app.mount('#app')
    </script>
</body>

</html>